import React, { Component } from 'react'
import CommonEchartComp from '../../components/CommonEchartComp';
import styles from '../style/index.less'
export default class EchartsBar extends Component {
  // echarts项配置
  echartsConfig = {
    hotlineCompletion: {
      title: '热线工单完成率',
      options: ['年', '月'],
      color: ['#FFB900', '#A668FB', '#00B7EE'],
    },
  }
  // 生成echarts图
  getEcharts = () => {
    const { echartsModule } = this.props;
    // 生成默认时间轴
    const year = new Date().getFullYear();
    const xAxisData = [];
    for (let i = 1; i <= 12; i++) {
      xAxisData.push(`${year}年${i >= 10 ? i : '0' + i}月`);
    }
    const echartsOption = {
      containerStyle: { width: '100%', height: 300 },
      option: {}
    }
    let option = {};
    return (
      echartsModule.map(ele => {
        const { name, data } = ele;
        const { color } = this.echartsConfig[name];
        const legendData = [];
        data.forEach(x => { legendData.push(x.name) });
        const seriesData = data;
        seriesData.forEach((x, i) => {
          x.type = i === seriesData.length - 1 ? 'line' : 'bar';
          x.color = color[i];
          x.yAxisIndex = i === seriesData.length - 1 ? 1 : 0;
        });
        option = {
          // 鼠标移入特效  flag为true代表 当前echarts是 柱状图  false代表是 饼状图
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: { color: '#999' }
            }
          },
          // 当前echarts在父盒子内的位置
          grid: {
            top: "15%",
            bottom: '10%',
            left: '15%',
          },
          legend: {
            data: legendData,
            padding: [8, 0, 0, 10]
          },
          xAxis: [
            {
              type: 'category',
              data: xAxisData,
              axisPointer: { type: 'shadow' },  // 鼠标移入是否出现阴影
            }
          ],
          yAxis: [
            { type: 'value', name: '个', nameTextStyle: { padding: [10, 0, 0, -10] } },
            { type: 'value', name: '%', nameTextStyle: { padding: [10, 0, 0, -10] } }
          ],
          series: seriesData
        }
        echartsOption.option = option;
        return (
          <div key={name} className={styles.echarts_main} >
            {<CommonEchartComp {...echartsOption} />}
          </div >
        )
      })
    )
  }
  render() {
    return (
      <>
        {this.getEcharts()}
      </>
    )
  }
}
